.warp{
    height: 100%;
    display: flex;
    display: -webkit-flex;
    align-items:center;
    justify-content:center;
}
.flex {
    width:100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row
}
.flex div {
    margin: 8px;
    margin-left: 0;
}

.box{
    width:135px;
    height:183px;
    position:relative;
    perspective:500px;
    -webkit-perspective:500px;
}
.box div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:transparent;
    -webkit-perspective:10000px;
    backface-visibility:hidden;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
}
.box :first-child{
    z-index: 2;

    /*background:#f00;*/
    /*-webkit-transform:rotateY(0);*/
    /*-moz-transform:rotateY(0);*/
}
.box :last-child{

    /*background:#86c4cd;*/
    /*-webkit-transform:rotateY(180deg);*/
    transform:rotateY(-180deg);
}


.flip {
    width:135px;
    height:183px;
    position:relative;
    perspective:500px;
    -webkit-perspective:500px;
}
.flip div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:transparent;
    -webkit-perspective:10000px;
    backface-visibility:hidden;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
}
.flip :first-child{
    z-index: 2;

    /*background:#f00;*/
    transform:rotateY(-180deg);
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
}
.flip :last-child{
    /*background:#86c4cd;*/
    transform:rotateY(-360deg);
    -webkit-transform:rotateY(-360deg);
    -moz-transform:rotateY(-360deg);
    /*-webkit-transform:rotateY(-180deg);*/
    /*-webkit-transform:rotateY(0);*/
    /*-moz-transform:rotateY(0);*/
}